<template>
  <view :class="['draw-photo-wrap', 'bg-' + type]" :style="style">
    <text :style="textStyle">{{ computedText }}</text>
  </view>
</template>

<script setup>
import {computed} from 'vue';

const props = defineProps({
  text: {
    type: String,
    default: ''
  },
  width: {
    type: [String, Number],
    default: 32
  },
  id: {
    type: [String, Number],
    default: 1
  }
});

const style = computed(() => ({
  'width': typeof props.width === 'number' ? props.width + 'px' : `calc(${props.width})`,
  'height': typeof props.width === 'number' ? props.width + 'px' : `calc(${props.width})`,
  'line-height': typeof props.width === 'number' ? props.width + 'px' : `calc(${props.width})`
}));

const textStyle = computed(() => ({
  'font-size': typeof props.width === 'number' ? (props.width / 2.5) + 'px' : `calc((${props.width})/2.5)`
}));

const computedText = computed(() => {
  let index;
  if (props.text === '匿名') {
    return '匿名';
  } else if (props.text && props.text.length && props.text.length >= 3) {
    index = -2;
  } else if (props.text && props.text.length && props.text.length < 3) {
    index = -1;
  } else {
    return '未知';
  }
  return props.text.slice(index);
});

const type = computed(() => {
  return props.id % 4;
});
</script>


<style lang="scss" scoped>
.draw-photo-wrap {
  color: #fff;
  background: #1EA69D;
  text-align: center;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;

  &.bg-1 {
    background: #757EC9;
  }

  &.bg-2 {
    background: #6EA5D5;
  }

  &.bg-3 {
    background: #C7B282;
  }
}
</style>